<template>
    <div>
        <headerNav title="客户订单"/>
        <div class="list-wrap">
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true" infinite-scroll-distance="30">
                <div class="ul">
                    <div class="li" v-for="(item, index) in list" :key="index" @click="toList(item)">
                        <div class="left">
                            <div class="name">{{item.userName}} {{item.phoneNum}}</div>
                            <div class="address">{{item.provinceName + item.cityName + item.districtName + item.contactAddr}}</div>
                        </div>
                        <van-icon name="arrow" class="icon"/>
                    </div>
                </div>
                <div class="tips" v-show="busy && list.length > 9">{{tips}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from "vue"
import { Icon } from 'vant';
import {findCustomerList} from "../../../api/page.js"

Vue.use(Icon);
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            list: [],
            busy: false,
            tips: "页面正在加载中...",
            temp: false
        };
    },
    created() {
        this.pageNum = 1
        this.getListData()
    },
    mounted() {

    },
    methods: {
        loadMore() {
            console.log(this.pageNum, this.list.length)
            if (!this.busy && !this.temp) {
                this.getListData()
            }
        },
        getListData() {
            this.busy = true
            this.temp = true
            findCustomerList({pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
                this.temp = false
                this.busy = false;
                this.list = this.list.concat(res.data.list)
                this.pageNum = this.pageNum + 1
                if (res.data.list.length < 10) {
                    this.busy = true;
                    this.tips = "页面数据全部加载完毕"
                }
            })
        },
        toList(item) {
            sessionStorage.setItem("customOrder", JSON.stringify(item))
            this.$router.push({name: "userOrder", query: {from: this.$route.query.from}})
        }
    }
};
</script>

<style scoped lang="less">
.list-wrap {
    padding-bottom: 0.8rem;
    position: relative;
    top: 1.226667rem;
}
.ul {
    padding: 0px 0.4rem;
    box-sizing: border-box;
    .li {
        padding: 0.533333rem 0;
        border-bottom: 0.026667rem solid transparent;
        border-image: linear-gradient(to bottom,transparent 50%, #e5e5e5 50%) 0 0 100%/100px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.373333rem;
        .left {
            .name {
                font-size: 0.4rem;
            }
            .address {
                color: #ccc;
            }
        }

    }
}
.tips {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.373333rem;
    color: #333;
}
</style>
